<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>渐贺的博客</title>
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_1000799_2ifstsv9z4q.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
  <link rel="stylesheet" href="./styles/index.css" />
  <link rel="shortcut icon" href="./images/logo/github.png" />
</head>

<body>
  <div class="page-sidebar">
    <h1 class="title"><i class="fa fa-paper-plane"></i>渐贺的博客</h1>
    <ul class="menu"></ul>
  </div>
  <div class="page-container">
    <section class="content">
      <h2 class="title"><i class="fa fa-html5"></i>HTML</h2>
      <ul class="list">
        <li class="item" data-status="planing">
          <a class="logo" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML"><img data-src="./images/logo/html5.png" />HTML 5</a>
        </li>
        <li class="item" data-status="finish">
          <a class="logo" href="./articles/svg.html"><img data-src="./images/logo/svg.png" />SVG</a>
          <p class="desc">可缩放矢量图。</p>
        </li>
      </ul>
    </section>
    <section class="content">
      <h2 class="title"><i class="fa fa-css3"></i>CSS</h2>
      <ul class="list">
        <li class="item" data-status="learning">
          <a class="logo" href="./articles/css3.html"><img data-src="./images/logo/css3.png" />CSS 3</a>
        </li>
        <li class="item" data-status="finish">
          <a class="logo" href="./articles/sass.html"><img data-src="./images/logo/sass.png" />Sass</a>
          <p class="desc">成熟、稳定、强大的 CSS 扩展语言解析器。</p>
        </li>
      </ul>
    </section>
    <section class="content">
      <h2 class="title"><i class="fa fa-font"></i>字体图标</h2>
      <ul class="list">
        <li class="item" data-status="external">
          <a class="logo" href="https://iconfont.cn/"><img data-src="./images/logo/iconfont.png" />IconFont</a>
          <p class="desc">阿里妈妈 MUX 倾力打造的矢量图标管理、交流平台。</p>
        </li>
        <li class="item" data-status="external">
          <a class="logo" href="https://fontawesome.com/"><img data-src="./images/logo/fontawesome.png" />Font Awesome</a>
          <p class="desc">免费的矢量图标库，为主流前端框架提供规范的官方 npm 包。</p>
          <div class="link">
            <a href="https://fontawesome.com/icons">V5</a>
            <a href="https://fontawesome.com/v4.7.0/icons/">V4</a>
            <a href="https://fontawesome.com.cn/faicons/">V4CN</a>
            <a href="https://github.com/FortAwesome/Font-Awesome">GitHub</a>
            <a href="https://bootcdn.cn/font-awesome/">CDN</a>
          </div>
        </li>
      </ul>
    </section>
    <section class="content">
      <h2 class="title"><i class="fa fa-code"></i>JavaScript</h2>
      <ul class="list">
        <li class="item" data-status="learning">
          <a class="logo" href="./articles/js.html"><img data-src="./images/logo/js.png" />JavaScript</a>
        </li>
        <li class="item" data-status="learning">
          <a class="logo" href="./articles/js-data.html"><img data-src="./images/logo/js.png" />JavaScript 数据</a>
        </li>
        <li class="item" data-status="learning">
          <a class="logo" href="./articles/json.html"><img data-src="./images/logo/json.gif" />JSON</a>
        </li>
      </ul>
    </section>
    <section class="content">
      <h2 class="title"><i class="fa fa-internet-explorer"></i>网络请求</h2>
      <ul class="list">
        <li class="item" data-status="learning">
          <a class="logo" href="./articles/http.html"><img data-src="./images/logo/http.png" />通信协议</a>
          <p class="desc"></p>
        </li>
        <li class="item" data-status="finish">
          <a class="logo" href="./articles/xhr.html"><img data-src="./images/logo/js.png" />XMLHttpRequest</a>
          <p class="desc"></p>
        </li>
        <li class="item" data-status="planing">
          <a class="logo" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API"><img data-src="./images/logo/js.png" />Fetch API</a>
          <p class="desc"></p>
        </li>
        <li class="item" data-status="learning">
          <a class="logo" href="./articles/axios.html"><img data-src="./images/logo/axios.svg" />Axios</a>
          <p class="desc"></p>
        </li>
        <li class="item" data-status="finish">
          <a class="logo" href="./articles/ajax.html"><img data-src="./images/logo/jquery.png" />jQuery Ajax</a>
          <p class="desc"></p>
        </li>
        <li class="item" data-status="learning">
          <a class="logo" href="./articles/nginx.html"><img data-src="./images/logo/nginx.png" />反向代理</a>
        </li>
      </ul>
    </section>
    <section class="content">
      <h2 class="title"><i class="fa fa-rocket"></i>Node.js</h2>
      <ul class="list">
        <li class="item" data-status="mark">
          <a class="logo" href="http://nodejs.cn/"><img data-src="./images/logo/node.png" />Node.js</a>
        </li>
        <li class="item" data-status="mark">
          <a class="logo" href="https://www.npmjs.cn/"><img data-src="./images/logo/npm.png" />npm</a>
        </li>
      </ul>
    </section>
    <section class="content">
      <h2 class="title"><i class="fa iconfont icon-vue"></i>框架类库</h2>
      <ul class="list">
        <li class="item" data-status="external">
          <a class="logo" href="https://getbootstrap.com/"><img data-src="./images/logo/bootstrap.svg" />Bootstrap</a>
          <p class="desc">基于 HTML/CSS/JS 的前端组件库。</p>
          <div class="link">
            <a href="https://getbootstrap.com/">V4</a>
            <a href="https://v4.bootcss.com/">V4CN</a>
            <a href="https://v3.bootcss.com/">V3CN</a>
            <a href="https://github.com/twbs/bootstrap">GitHub</a>
            <a href="https://bootcdn.cn/twitter-bootstrap/">CDN</a>
          </div>
        </li>
        <li class="item" data-status="external">
          <a class="logo" href="https://keenthemes.com/metronic/"><img data-src="./images/logo/metronic.png" />Metronic</a>
          <p class="desc">基于 Bootstrap 的后台管理模板主题库。</p>
          <div class="link">
            <a href="https://keenthemes.com/metronic/">V5</a>
            <a href="https://metronic.net.cn/">V5CN</a>
          </div>
        </li>
        <li class="item" data-status="learning">
          <a class="logo" href="./articles/vue.html"><img data-src="./images/logo/vue.png" />Vue.js</a>
          <p class="desc">渐进式 JavaScript 框架。</p>
          <div class="link">
            <a href="./articles/vue-demo.html">demo</a>
          </div>
        </li>
        <li class="item" data-status="external">
          <a class="logo" href="https://element-cn.eleme.io/#/zh-CN"><img data-src="./images/logo/element.svg" />Element UI</a>
          <p class="desc">网站快速成型工具，基于 Vue2.0 的桌面端组件库。</p>
          <div class="link">
            <a href="https://element-cn.eleme.io/#/zh-CN/component/installation">V2</a>
            <a href="https://github.com/ElemeFE/element">GitHub</a>
            <a href="https://bootcdn.cn/element-ui/">CDN</a>
          </div>
        </li>
        <li class="item" data-status="external">
          <a class="logo" href="https://mint-ui.github.io/#!/zh-cn"><img data-src="./images/logo/mint.svg" />Mint UI</a>
          <p class="desc">基于 Vue.js 的移动端组件库。</p>
          <div class="link">
            <a href="https://mint-ui.github.io/docs/#/zh-cn2">V2</a>
          </div>
        </li>
        <li class="item" data-status="mark">
          <a class="logo" href="http://angular.cn/"><img data-src="./images/logo/angular.svg" />AngularJS</a>
        </li>
        <li class="item" data-status="mark">
          <a class="logo" href="https://react.docschina.org/"><img data-src="./images/logo/react.png" />React</a>
        </li>
        <li class="item" data-status="mark">
          <a class="logo" href="https://www.react-native.cn/"><img data-src="./images/logo/react-native.png" />React Native</a>
        </li>
      </ul>
    </section>
    <section class="content">
      <h2 class="title"><i class="fa fa-cube"></i>插件库</h2>
      <ul class="list">
        <li class="item" data-status="external">
          <a class="logo" href="https://idangero.us/swiper/"><img data-src="./images/logo/swiper.png" />Swiper</a>
          <p class="desc">开源、免费、强大的触摸滑动插件。</p>
          <div class="link">
            <a href="https://idangero.us/swiper/get-started/">V4</a>
            <a href="https://swiper.com.cn/">V4CN</a>
            <a href="https://3.swiper.com.cn/">V3CN</a>
            <a href="https://github.com/nolimits4web/swiper">GitHub</a>
            <a href="https://bootcdn.cn/Swiper/">CDN</a>
          </div>
        </li>
        <li class="item" data-status="finish">
          <a class="logo" href="./articles/highlight.html"><span>H</span>highlight.js</a>
          <p class="desc">风格多样的语法高亮显示插件。</p>
        </li>
        <li class="item" data-status="finish">
          <a class="logo" href="./articles/slimscroll.html"><span>S</span>slimScroll.js</a>
          <p class="desc">小巧美观的虚拟滚动条插件。</p>
        </li>
      </ul>
    </section>
    <section class="content">
      <h2 class="title"><i class="fa fa-edit"></i>开发工具</h2>
      <ul class="list">
        <li class="item" data-status="learning">
          <a class="logo" href="./articles/git.html"><img data-src="./images/logo/git.png" />Git</a>
          <p class="desc">免费、开源的分布式版本控制系统。</p>
        </li>
        <li class="item" data-status="mark">
          <a class="logo" href="https://www.webpackjs.com/"><img data-src="./images/logo/webpack.svg" />webpack</a>
        </li>
        <li class="item" data-status="finish">
          <a class="logo" href="./articles/ide.html"><img data-src="./images/logo/vscode.png" />IDE</a>
          <p class="desc">常用编辑器配置和构建检查。</p>
        </li>
        <li class="item" data-status="external">
          <a class="logo" href="https://codepen.io/"><img data-src="./images/logo/codepen.svg" />CodePen</a>
          <p class="desc">在线编辑器和前端开发社区。</p>
          <div class="link">
            <span>类似网站：</span>
            <a href="https://jsfiddle.net/">JS Fiddle</a>
            <a href="https://jsbin.com/">JS Bin</a>
            <a href="https://jsrun.pro/">JSRUN(国产)</a>
          </div>
        </li>
      </ul>
    </section>
    <section class="content">
      <h2 class="title"><i class="fa fa-flag"></i>开发规范</h2>
      <ul class="list">
        <li class="item" data-status="external">
          <a class="logo" href="https://developer.mozilla.org/zh-CN/"><img data-src="./images/logo/mdn.png" />MDN web docs</a>
          <p class="desc">Mozilla 开发者社区。</p>
        </li>
        <li class="item" data-status="external">
          <a class="logo" href="https://alloyteam.github.io/CodeGuide/"><img data-src="./images/logo/qq.svg" />Code Guide</a>
          <p class="desc">腾讯 @AlloyTeam 团队规范文档。</p>
        </li>
        <li class="item" data-status="external">
          <a class="logo" href="https://sideeffect.kr/popularconvention/"><img data-src="./images/logo/github.png" />Coding Convention</a>
          <p class="desc">Github 主流代码书写习惯。</p>
        </li>
        <li class="item" data-status="finish">
          <a class="logo" href="./articles/ui.html"><img data-src="./images/logo/ui.png" />UI</a>
          <p class="desc">页面布局、色彩、元素的基本示例。</p>
        </li>
      </ul>
    </section>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="./scripts/index.js"></script>
</body>

</html>
